import { View } from '@tarojs/components';

interface TabsProps {
  align?: 'center' | 'start' | 'end' | 'space-around';
  menus?: string[];
  select?: number;
  change?: (id: number) => void; // 点击菜单项的回调函数
  id?: string;
}

export default ({
  select = 0,
  align = 'center',
  menus = ['关注', '推荐'],
  change,
  id,
}: TabsProps) => {
  return (
    <View
      id={id}
      className="flex  gap-4 items-center px-2"
      style={{ justifyContent: align }}
    >
      {menus.map((el, i) => (
        <View
          onClick={() => {
            if (change) change(i);
          }}
          key={i}
          className={`${
            select == i ? 'font-bold' : ''
          } flex flex-col justify-end items-center gap-1`}
        >
          <View>{el}</View>
          {select == i ? (
            <View
              style={{
                backgroundImage: 'linear-gradient(to left, #ee83ff, #8155ff)',
                height: '0.25rem',
                width: '1rem',
                borderRadius: '2rem',
              }}
            ></View>
          ) : (
            <View className="h-1"></View>
          )}
        </View>
      ))}
    </View>
  );
};
